<template>
  <div class="behavior-management-guide">
    <a-modal
      :open="visible"
      title="行为管理使用指南"
      width="900px"
      @cancel="handleClose"
      :footer="null"
    >
      <div class="guide-content">
        <div class="guide-sections">
          <section class="guide-section">
            <h3>🎯 行为管理概述</h3>
            <p>
              行为管理系统支持资源的各种操作行为定义、执行、补偿和编排管理：
            </p>
            <a-row :gutter="16" style="margin-top: 16px">
              <a-col :span="6">
                <a-card size="small" class="behavior-card">
                  <template #title>
                    <IconifyIcon icon="ant-design:setting-outlined" />
                    行为定义
                  </template>
                  <p>定义资源的各种操作行为</p>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" class="behavior-card">
                  <template #title>
                    <IconifyIcon icon="ant-design:play-circle-outlined" />
                    行为执行
                  </template>
                  <p>执行和跟踪行为状态</p>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" class="behavior-card">
                  <template #title>
                    <IconifyIcon icon="ant-design:rollback-outlined" />
                    补偿机制
                  </template>
                  <p>失败时的回滚和补偿</p>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" class="behavior-card">
                  <template #title>
                    <IconifyIcon icon="ant-design:cluster-outlined" />
                    行为编排
                  </template>
                  <p>复杂行为的流程编排</p>
                </a-card>
              </a-col>
            </a-row>
          </section>

          <section class="guide-section">
            <h3>⚙️ 行为定义配置</h3>

            <h4>基本配置</h4>
            <a-descriptions :column="2" bordered size="small">
              <a-descriptions-item label="行为名称">
                描述性名称，如"启动服务"
              </a-descriptions-item>
              <a-descriptions-item label="行为代码">
                唯一标识符，如"START_SERVICE"
              </a-descriptions-item>
              <a-descriptions-item label="行为类型">
                预定义类型：创建、更新、删除、启动、停止等
              </a-descriptions-item>
              <a-descriptions-item label="优先级">
                执行优先级：低、普通、高、紧急、关键
              </a-descriptions-item>
            </a-descriptions>

            <h4 style="margin-top: 24px">执行配置</h4>
            <a-steps direction="vertical" size="small">
              <a-step
                title="参数定义"
                description="定义行为执行所需的输入参数"
              />
              <a-step title="条件设置" description="设置行为执行的前置条件" />
              <a-step title="动作配置" description="配置具体的执行动作" />
              <a-step title="补偿策略" description="设置失败时的补偿机制" />
              <a-step title="超时重试" description="配置超时时间和重试策略" />
            </a-steps>
          </section>

          <section class="guide-section">
            <h3>🔄 行为执行流程</h3>

            <a-timeline>
              <a-timeline-item color="blue">
                <h4>待执行 (PENDING)</h4>
                <p>行为已创建，等待执行</p>
              </a-timeline-item>
              <a-timeline-item color="orange">
                <h4>执行中 (RUNNING)</h4>
                <p>行为正在执行中</p>
              </a-timeline-item>
              <a-timeline-item color="green">
                <h4>执行成功 (SUCCESS)</h4>
                <p>行为执行完成</p>
              </a-timeline-item>
              <a-timeline-item color="red">
                <h4>执行失败 (FAILED)</h4>
                <p>行为执行失败，触发补偿</p>
              </a-timeline-item>
              <a-timeline-item color="purple">
                <h4>补偿中 (COMPENSATING)</h4>
                <p>正在执行补偿操作</p>
              </a-timeline-item>
              <a-timeline-item color="gray">
                <h4>已补偿 (COMPENSATED)</h4>
                <p>补偿操作完成</p>
              </a-timeline-item>
            </a-timeline>
          </section>

          <section class="guide-section">
            <h3>🛡️ 补偿机制</h3>

            <a-row :gutter="16">
              <a-col :span="12">
                <a-card size="small" title="补偿策略类型">
                  <a-list size="small">
                    <a-list-item>
                      <a-tag color="red">回滚</a-tag>
                      撤销已执行的操作
                    </a-list-item>
                    <a-list-item>
                      <a-tag color="orange">重试</a-tag>
                      重新执行失败的操作
                    </a-list-item>
                    <a-list-item>
                      <a-tag color="blue">替代方案</a-tag>
                      使用备选方案完成操作
                    </a-list-item>
                    <a-list-item>
                      <a-tag color="purple">手动处理</a-tag>
                      通知管理员手动处理
                    </a-list-item>
                    <a-list-item>
                      <a-tag color="green">自动修复</a-tag>
                      系统自动修复问题
                    </a-list-item>
                  </a-list>
                </a-card>
              </a-col>
              <a-col :span="12">
                <a-card size="small" title="补偿触发条件">
                  <a-list size="small">
                    <a-list-item>执行超时</a-list-item>
                    <a-list-item>执行失败</a-list-item>
                    <a-list-item>资源状态异常</a-list-item>
                    <a-list-item>依赖服务不可用</a-list-item>
                    <a-list-item>手动触发</a-list-item>
                  </a-list>
                </a-card>
              </a-col>
            </a-row>
          </section>

          <section class="guide-section">
            <h3>🎼 行为编排</h3>

            <a-alert
              message="编排概念"
              description="行为编排允许将多个行为组合成复杂的业务流程，支持顺序执行、并行执行、条件分支等模式"
              type="info"
              show-icon
              style="margin-bottom: 16px"
            />

            <a-row :gutter="16">
              <a-col :span="8">
                <a-card size="small" title="顺序执行">
                  <p>按顺序依次执行多个行为</p>
                  <a-tag color="blue">串行</a-tag>
                </a-card>
              </a-col>
              <a-col :span="8">
                <a-card size="small" title="并行执行">
                  <p>同时执行多个独立的行为</p>
                  <a-tag color="green">并行</a-tag>
                </a-card>
              </a-col>
              <a-col :span="8">
                <a-card size="small" title="条件分支">
                  <p>根据条件选择执行路径</p>
                  <a-tag color="orange">分支</a-tag>
                </a-card>
              </a-col>
            </a-row>
          </section>

          <section class="guide-section">
            <h3>📊 监控和告警</h3>

            <a-row :gutter="16">
              <a-col :span="12">
                <a-card size="small" title="监控指标">
                  <a-list size="small">
                    <a-list-item>执行成功率</a-list-item>
                    <a-list-item>平均执行时间</a-list-item>
                    <a-list-item>失败率统计</a-list-item>
                    <a-list-item>补偿触发次数</a-list-item>
                    <a-list-item>资源使用情况</a-list-item>
                  </a-list>
                </a-card>
              </a-col>
              <a-col :span="12">
                <a-card size="small" title="告警类型">
                  <a-list size="small">
                    <a-list-item>
                      <a-tag color="red">执行失败</a-tag>
                      行为执行失败告警
                    </a-list-item>
                    <a-list-item>
                      <a-tag color="orange">执行超时</a-tag>
                      行为执行超时告警
                    </a-list-item>
                    <a-list-item>
                      <a-tag color="purple">补偿失败</a-tag>
                      补偿执行失败告警
                    </a-list-item>
                    <a-list-item>
                      <a-tag color="blue">自定义告警</a-tag>
                      用户自定义告警规则
                    </a-list-item>
                  </a-list>
                </a-card>
              </a-col>
            </a-row>
          </section>

          <section class="guide-section">
            <h3>💡 最佳实践</h3>

            <a-alert
              message="行为设计"
              description="设计行为时要考虑幂等性、可重试性和补偿性，确保系统的一致性和可靠性"
              type="success"
              show-icon
              style="margin-bottom: 16px"
            />

            <a-alert
              message="监控告警"
              description="设置合理的监控指标和告警阈值，及时发现和处理问题"
              type="warning"
              show-icon
              style="margin-bottom: 16px"
            />

            <a-alert
              message="测试验证"
              description="在生产环境部署前，充分测试行为的各种场景和异常情况"
              type="info"
              show-icon
            />
          </section>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { IconifyIcon } from '@vben/icons';

// Props
interface Props {
  visible: boolean;
}

const props = defineProps<Props>();

// Emits
const emit = defineEmits<{
  close: [];
}>();

// 方法
const handleClose = () => {
  emit('close');
};
</script>

<style lang="less" scoped>
.behavior-management-guide {
  .guide-content {
    max-height: 600px;
    overflow-y: auto;

    .guide-sections {
      .guide-section {
        margin-bottom: 32px;

        h3 {
          color: #1890ff;
          border-bottom: 2px solid #1890ff;
          padding-bottom: 8px;
          margin-bottom: 16px;
        }

        h4 {
          color: #333;
          margin-bottom: 12px;
        }

        .behavior-card {
          .ant-card-head-title {
            display: flex;
            align-items: center;
            gap: 8px;
          }
        }
      }
    }
  }
}
</style>
